<template>
	<view class="loginPage">
		<view class="backgroundImg p-left30  font-weight_bold"
			style="color: rgb(255, 255, 255);font-size: 30px;padding-top: 200rpx;">
			你好,</br>
			欢迎使用会员卡
		</view>
		<view class="login ">

			<sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="navIndex" padding="50rpx"
				activeColor="rgb(28, 110, 255)" :size="160" activeLineBg="rgb(28, 110, 255)" textAlign="center"
				activeLineWidth="100%" activeDirection="space-between" activeLineHeight="4rpx" bgColor="#fff"
				:margin="0" @change="getChange"></sunui-navbar>

			<view class="account" v-if="navIndex==0">
				<view class="iphone">
					<view class="margin-bottom_30rpx" style="font-size: 32rpx;font-weight: 700;">
						手机号/账号
					</view>
					<view class="inputIphone flex-start">
						<image style="margin-right: 10rpx;" class="verificationCode "
							src="../../static/会员卡管理端/组合 545.png" mode=""></image>
						<!-- <uni-icons style="margin-right:10rpx ;" type="person" size="20"></uni-icons> -->
						<input maxlength="11" class="font-overflow" v-model="form.account" placeholder="请输入手机账号" />
					</view>
				</view>
				<view class="passwode margin-top_40rpx ">
					<view class="margin-bottom_30rpx" style="font-size: 32rpx;font-weight: 700;">
						密码
					</view>
					<view class="inputIphone flex-start">
						<image style="margin-right: 10rpx;" class="verificationCode "
							src="../../static/会员卡管理端/组合 553.png" mode=""></image>
						<!-- <uni-icons style="margin-right:10rpx ;" type="locked" size="20"></uni-icons> -->
						<input :password="showPassword" class="font-overflow" v-model="form.password"
							placeholder="请输入登录密码" />
					</view>
				</view>
				<view class="passwode margin-top_40rpx ">
					<view class="margin-bottom_30rpx" style="font-size: 32rpx;font-weight: 700;">
						选择门店
					</view>
					<zxz-uni-data-select v-model="value" :localdata="range" @selectClick="selectClick"
						@change="changeSelect"></zxz-uni-data-select>
				</view>

				<view class="loginBtn flex margin-top_60rpx" @click="loginBackend()">
					登录
				</view>
				<!-- 	<view class="flex margin-top_50rpx" style="color: rgb(42, 137, 255);">
					我也要免费开通会员卡 去开通 <uni-icons color="rgb(42, 137, 255)" style="margin-right:10rpx ;" type="right" size="16"></uni-icons>
				</view> -->
				<!-- 隐私协议 -->
				<radio-group name="apply" class="radioText flex flex-align-center" :class="'animation-' + animation"
					@click="checkedOn2()">
					<label @click.stop="checkedOn2()">
						<radio :checked="agreeChecked" value="1" color="rgb(42, 137, 255)"
							style="transform:scale(0.8);padding-left:12rpx;" />
					</label>
					<view class="agree flex-align-center">
						<view>我已阅读并同意</view>
						<text @click.stop="toAgreement()">《平台交易规则》</text>
					</view>
				</radio-group>
			</view>
			<view class="account" v-if="navIndex==1">

				<view class="iphone">
					<view class="margin-bottom_30rpx" style="font-size: 32rpx;font-weight: 700;">
						用户昵称
					</view>
					<view class="inputIphone flex-start">
						<image style="margin-right: 10rpx;" class="verificationCode "
							src="../../static/会员卡管理端/组合 545.png" mode=""></image>
						<!-- <uni-icons style="margin-right:10rpx ;" color="rgb(122, 122, 122);" type="person" size="20"></uni-icons> -->
						<input class="font-overflow" v-model="form.account" placeholder="请输入用户昵称" />
					</view>
				</view>
				<view class="iphone margin-top_40rpx">
					<view class="margin-bottom_30rpx" style="font-size: 32rpx;font-weight: 700;">
						登录手机号
					</view>
					<view class="inputIphone flex-start">
						<image style="margin-right: 10rpx;" class="verificationCode "
							src="../../static/会员卡管理端/微信图片_20240313154813.png" mode=""></image>
						<input class="font-overflow" v-model="form.account" placeholder="请输入登录手机号" />
					</view>
				</view>
				<view class="iphone margin-top_40rpx">
					<view class="margin-bottom_30rpx" style="font-size: 32rpx;font-weight: 700;">
						手机验证码
					</view>
					<view class="inputIphone flex-start iphones">
						<image style="margin-right: 10rpx;" class="verificationCode "
							src="../../static/会员卡管理端/组合 554.png" mode=""></image>
						<input class="font-overflow" v-model="form.account" placeholder="请输入手机验证码" />
						<view class="verificationCodes" @click="getVerificationCode()">
							{{ count ? count + '秒' : '获取验证码' }}</view>
					</view>
				</view>
				<view class="passwode margin-top_40rpx ">
					<view class="margin-bottom_30rpx" style="font-size: 32rpx;font-weight: 700;">
						密码
					</view>
					<view class="inputIphone flex-start">
						<image style="margin-right: 10rpx;" class="verificationCode "
							src="../../static/会员卡管理端/组合 553.png" mode=""></image>
						<!-- <uni-icons style="margin-right:10rpx ;"color="rgb(122, 122, 122)" type="locked" size="20"></uni-icons> -->
						<input :password="showPassword" class="font-overflow" v-model="form.password"
							placeholder="请输入登录密码" />
					</view>
				</view>
				<view class="loginBtn flex margin-top_60rpx">
					登录
				</view>
				<!-- 	<view class="flex margin-top_50rpx" style="color: rgb(42, 137, 255);">
		    		我也要免费开通会员卡 去开通 <uni-icons color="rgb(42, 137, 255)" style="margin-right:10rpx ;" type="right" size="16"></uni-icons>
		    	</view> -->
				<!-- 隐私协议 -->
				<radio-group name="apply" class="radioText flex flex-align-center" :class="'animation-' + animation"
					@click="checkedOn2()">
					<label @click.stop="checkedOn2()">
						<radio :checked="agreeChecked" value="1" color="rgb(42, 137, 255)"
							style="transform:scale(0.8);padding-left:12rpx;" />
					</label>
					<view class="agree flex-align-center">
						<view>我已阅读并同意</view>
						<text @click.stop="toAgreement()">《会员卡服务协议》</text>
					</view>
				</radio-group>

			</view>
		</view>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class="flex-column ">
					<scroll-view :scroll-y="true" style="height: 1000rpx;">
						<view style="text-align: center; margin-bottom: 20rpx;">
							用户协议
						</view>

						<view v-html="transaction_rule" class="">

						</view>
					</scroll-view>
				</view>

			</template>
		</sunui-popup>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {

				navIndex: 0,
				tabIndex: 4,
				showPassword: true,
				value: '',
				tabList: [{
					name: '登录',
					id: '1' //null
				}, ],
				form: {
					account: '',
					password: ''

				},
				animation: '',
				agreeChecked: false,
				disableCode: false,
				count: null,
				range: [],
				// 角色列表
				rolelist: [],
				submitRoleData: {},
				transaction_rule: '',



			}
		},
		onLoad() {
			uni.removeStorageSync('login');
			this.init()
			// this.fn()
		},
		onShow() {
			this.$at.releaseKey('submit');
		},
		methods: {
			async init() {

				const res = await this.$http.post({
					url: this.$api.getConfig,
					data: {

					},

				})
				console.log(res)
				if (res.code == 0) {
					this.transaction_rule = res.data.transaction_rule
				}
			},
			getChange(index) {
				console.log(index)
				this.navIndex = index
			},
			async getVerificationCode() {
				if (!this.disableCode) {

					this.countDown(60);

					// if (/^1[3456789]\d{9}$/.test(this.form.merchantCode)) {
					// 		this.countDown(60);
					// } else {
					// 	this.$sun.toast('请填写正确的手机号', 'none');
					// }
				} else {
					this.$sun.toast('请稍后在试', 'none');
				}
			},
			// 验证码码倒计60秒
			countDown(seconds) {
				this.count = seconds;
				this.disableCode = true;
				var countdownTimer = setInterval(() => {
					this.count--;
					if (this.count === 0) {
						clearInterval(countdownTimer);
						this.disableCode = false;
						// 在这里可以触发验证码过期后的操作
					} else {
						this.disableCode = true;
					}
					console.log(this.disableCode)
				}, 1000);
			},

			toAgreement() {
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:20rpx',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
			},
			async loginBackend() {
				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.form.account) {
							this.$sun.toast("请填写手机号", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.form.account) {
							this.$sun.toast("请填写密码", 'none')
							this.$at.releaseKey('submit');
						} else if (Object.keys(this.submitRoleData).length === 0) {
							this.$sun.toast("请选择账号归属店铺及角色", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.agreeChecked) {
							this.$sun.toast('请先阅读并同意《会员卡服务协议》', 'none');
							this.animation = 'shake';
							setTimeout(() => {
								this.animation = '';
							}, 1300);
							this.$at.releaseKey('submit');
						} else {
							this.$sun.toast("登录成功", 'none')
							console.log(this.form, this.submitRoleData)

							const res = await this.$http.post({
								url: this.$api.login,
								data: {

									account: this.form.account,
									password: this.form.password,
									role_id: this.submitRoleData.role_id,
									store_id: this.submitRoleData.store_id,
								},

							})
							console.log(res)
							if (res.code == 0) {
								uni.setStorageSync('login', res.data)


								if (res.data.role_type == 2 && res.data.store_id != 0) {
									// this.$sun.navSwitch('/pages/cashierSystem/cashierSystem')
									uni.reLaunch({
										url: '/pages/cashierSystem/cashierSystem',
										success: () => {
											// this.fn()
										}
									});

								} else if (res.data.role_type == 3 && res.data.store_id != 0) {

									// 跳转到登录页面
									this.$at.releaseKey('submit');
									uni.reLaunch({
										url: '/pages/cashierSystem/cashierSystem',
										success: () => {
											// this.fn()
										}
									});
								} else {


									// 跳转到登录页面
									this.$at.releaseKey('submit');
									this.$sun.toast(res.msg, 'none')
								
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/index/index',
											success: () => {
												// this.fn()
											}
										});
										// this.$sun.navRe('/pages/index/index')
									}, 800)
								}


							} else {
								this.fn()
								this.$at.releaseKey('submit');
								this.$sun.toast(res.msg, 'none')
							}
						}
					}
				});



			},

			fn() {

			},
			changeSelect(e) {
				console.log('e:', e, this.value);
				const res = this.rolelist.find((item) => {
					return item.id == this.value
				})
				this.submitRoleData = res
				console.log(this.submitRoleData)

			},

			async selectClick(e) {
				console.log('e:', e);
				if (this.form.account) {
					const res = await this.$http.post({
						url: this.$api.roleByPhone,
						data: {

							account: this.form.account,

						},

					})
					console.log(res)
					if (res.code == 0) {
						this.rolelist = res.data.list
						const roleArr = res.data.list.map((item) => {
							return {
								"value": item.id,
								"text": item.role_name + '/' + item.store_name
							}
						})
						this.range = roleArr

					} else {
						this.$sun.toast(res.msg, 'none')
					}
				} else {
					this.$sun.toast('请填写手机号', 'none')
				}
			},
			checkedOn2(e) {
				this.agreeChecked = !this.agreeChecked
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}

	.loginPage {

		.backgroundImg {
			height: 480rpx;
			background: url('../../static/login/Rectangle 2534.png');
			background-repeat: no-repeat;
			background-size: contain;
		}
	}

	.login {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 30rpx 40rpx;
		margin-top: -50rpx;
		background: #fff;

		.account {
			margin-top: 70rpx;


			.iphone {
				.inputIphone {

					height: 108rpx;
					padding: 34rpx;
					border-radius: 20rpx;

					background: rgb(246, 246, 246);
				}

				.verificationCode {
					width: 36rpx;
					height: 36rpx;
				}

				.iphones {
					position: relative;

					.verificationCodes {
						z-index: 999;
						position: absolute;
						right: 16rpx;
						top: 23rpx;
						text-align: center;
						width: 170rpx;
						height: 65rpx;
						line-height: 65rpx;
						border-radius: 100rpx;
						font-size: 20rpx;
						border-radius: 20rpx;

						background: rgb(28, 110, 255);
						color: #fff;
					}
				}

			}

			.passwode {
				.inputIphone {

					height: 108rpx;
					padding: 34rpx;
					border-radius: 20rpx;

					background: rgb(246, 246, 246);
				}

				.verificationCode {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.loginBtn {
				border-radius: 78rpx;
				color: rgb(255, 255, 255);

				font-size: 18px;
				height: 98rpx;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(28, 110, 255, 0.2);
				background: rgb(28, 110, 255);
			}

			/* 隐私协议 start */
			.radioText {
				margin: 38rpx 0;
			}

			.agree {
				color: #666;

				text {
					color: #1890ff;
					// color: #19c866;
				}
			}

			.animation {
				width: 10rem;
				height: 2rem;
				background: #ffffff;
				margin-top: 0.5rem;
			}

			.animation-shake {
				animation: shake 0.3s !important;
			}

			@keyframes shake {

				0%,
				100% {
					transform: translateX(0);
				}

				10% {
					transform: translateX(-9px);
				}

				20% {
					transform: translateX(8px);
				}

				30% {
					transform: translateX(-7px);
				}

				40% {
					transform: translateX(6px);
				}

				50% {
					transform: translateX(-5px);
				}

				60% {
					transform: translateX(4px);
				}

				70% {
					transform: translateX(-3px);
				}

				80% {
					transform: translateX(2px);
				}

				90% {
					transform: translateX(-1px);
				}
			}

			/* 隐私协议 end */
		}
	}
</style>